<template>
  <el-checkbox-group
    v-model="comValue"
    :disabled="props.disabled"
    @change="change"
  >
    <el-checkbox
      v-for="item in options"
      :key="item.id"
      :value="item.code"
      :disabled="item.disabled"
      :class="isExclusiveLine ? 'exclusive-line' : ''"
      @change="changeSelect(item.code)"
    >
      {{ item.name }}
    </el-checkbox>
  </el-checkbox-group>
</template>

<script setup>
import { dictStore } from '@/pinia/modules/dict'
const dictStoreData = dictStore()
const emit = defineEmits(['update:modelValue', 'changeCheckBox'])
const props = defineProps({
  modelValue: {
    type: String,
    default() {
      return ''
    }
  },
  dictCode: {
    require: true,
    type: String,
    default: ''
  },
  disabled: {
    type: Boolean,
    default: false
  },
  // 是否每一项独占一行
  isExclusiveLine: {
    type: Boolean,
    default: false
  },
  // 是否互斥的数据
  isAlternative: {
    type: Boolean,
    default: false
  },
  // 互斥数据 传{0:{},1:{}}数据格式
  alternativeData: {
    type: Object,
    default: () => {}
  }
})
let comValue = ref([])
const state = reactive({
  dictCodeArray: []
})
comValue.value = props.modelValue ? props.modelValue.split(',') : []
watch(
  () => props.modelValue,
  val => {
    if (val) {
      comValue.value = val.split(',')
      if (props.isAlternative) {
        let arr = val.split(',')
        let alt = props.alternativeData[0].some(item => item === arr[0])
        options.value = alt
          ? props.alternativeData[0]
          : props.alternativeData[1]
      }
    } else {
      comValue.value = []
    }
  }
)

watch(
  () => comValue.value,
  (newVal, oldVal) => {
    if (newVal !== oldVal) {
      const arr = JSON.parse(JSON.stringify(comValue.value))
      arr.sort((a, b) => {
        return a - b
      })
      const str = arr.join(',')
      emit('update:modelValue', str)
    }
  }
)

const formatDictCode = () => {
  const code = props.dictCode
  const target = dictStoreData.dict?.find(item => item.code === code)
  state.dictCodeArray = target?.children.map(item => {
    return {
      ...item,
      disabled: false
    }
  })
}

const options = computed({
  get() {
    return state.dictCodeArray
  },

  set(value) {
    if (value.length > 0) {
      state.dictCodeArray.forEach(item => {
        // item.disabled = true
        item.disabled = value.some(item1 => item1 === item.code) ? false : true
      })
    } else {
      state.dictCodeArray.forEach(item => {
        item.disabled = false
      })
    }
  }
})

const changeSelect = val => {
  console.log(val, comValue.value.length)
  if (val && comValue.value.length > 0) {
    if (props.isAlternative) {
      if (props.alternativeData[0].includes(val)) {
        options.value = props.alternativeData[0]
      } else {
        options.value = props.alternativeData[1]
      }
    }
  } else {
    options.value = []
  }
}
const change = val => {
  // console.log(val)
  const str = val.join(',')
  emit('changeCheckBox', str)
}

onMounted(() => {
  formatDictCode()
})
</script>

<style>
.exclusive-line {
  display: block;
  height: 32px;
  line-height: 32px;
}
.el-checkbox {
  font-weight: normal;
}
</style>
